<template>
  <div class="max-box">
    <el-button class="f-m-5" type="success" @click="onSubmitSetting" size="mini">保存</el-button>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文件配置</span>
      </div>
      <div>
        <div>
          <span>db文件夹位置(软件包内):</span>
          <input type="file" @change="handleDBFile" webkitdirectory> {{settingForm.dbFolderPath}}
        </div>
        <el-divider></el-divider>
        <div>
          <span>引擎位置:</span>
          <input type="file" @change="handleEngineFile"> {{settingForm.enginePath}}
        </div>
        <el-divider></el-divider>
        <div>
          <span>导出文件位置:</span>
          <input type="file" @change="handleExportFile" webkitdirectory> {{settingForm.exportFilePath}}
        </div>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 2vh;">
      <div slot="header" class="clearfix">
        <span>分析速度</span>
      </div>
      <div>
        <el-row>
          <el-radio-group v-model="settingForm.analyzeSpeed">
            <el-radio label="极快"></el-radio>
            <el-radio label="快速"></el-radio>
            <el-radio label="普通"></el-radio>
            <el-radio label="精确"></el-radio>
            <el-radio label="极慢"></el-radio>
          </el-radio-group>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-tooltip class="item" effect="dark" content="用户的对局用最快的速度分析，其余的局面根据设置的速度来分析" placement="top-start">
            <el-switch
                v-model="settingForm.rapidAnalyzeGame"
                active-text="快速分析对局">
            </el-switch>
          </el-tooltip>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 2vh;">
      <div slot="header" class="clearfix">
        <span>分析阀值</span>
      </div>
      <div>
        <div>
          <span>错着阈值:</span>
          <el-tooltip content="与最佳走法相比评分差值" :delay="1000" placement="right">
            <el-inputNumber :max="1" :min="0.3" :step="0.1" v-model="settingForm.mistakeThreshold" />
          </el-tooltip>
        </div>
        <el-divider></el-divider>
        <div>
          <span>败着阈值:</span>
          <el-tooltip content="与最佳走法相比评分差值" :delay="1000" placement="right">
            <el-inputNumber :max="4" :min="1" :step="0.1" v-model="settingForm.blunderThreshold" />
          </el-tooltip>
        </div>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 2vh;">
      <div slot="header" class="clearfix">
        <span>账户</span>
      </div>
      <div>
        <div>
          <span>我的Lichess账户名:</span>
          <el-tooltip content="用来获取用户数据" :delay="1000" placement="right">
            <el-input v-model="settingForm.lichessUserName" style="width: 30%" size="mini" />
          </el-tooltip>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>

  import { invoke } from "@/lib/utils";
  import emitvue from "@/lib/emitvue";
  import * as utils from "@/lib/utils";
  import path from "path";


  export default {
    name: "Setting",
    data() {
      return {
        settingForm: {
          dbFolderPath: '',
          dbPath: '',
          tutorialDbPath: '',
          enginePath: '',
          exportFilePath: '',
          pluginPath: '',
          gamePath: '',
          analyzeSpeed: '快速',
          mistakeThreshold: 0.5,
          blunderThreshold: 1,
          defaultValue: true,
          lichessUserName: '',
          rapidAnalyzeGame: false,
        },
      }
    },
    methods: {
      handleDBFile(event) {
        this.settingForm.dbFolderPath = path.dirname(event.target.files[0].path)
      },
      handleEngineFile(event) {
        this.settingForm.enginePath = event.target.files[0].path
      },
      handleExportFile(event) {
        this.settingForm.exportFilePath = path.dirname(event.target.files[0].path)
      },
      async onSubmitSetting() {
        // 在设置的时候就设置好文件目录，那么打开就能直接拿来用了
        if (this.settingForm.dbFolderPath) {
          this.settingForm.dbPath = path.join(this.settingForm.dbFolderPath, './chessmate.db')
          this.settingForm.tutorialDbPath = path.join(this.settingForm.dbFolderPath, './tutorial.db')
          this.settingForm.pluginPath = path.join(this.settingForm.dbFolderPath, '../plugins')
          this.settingForm.gamePath = path.join(this.settingForm.dbFolderPath, './game.db')
        }
        await invoke('set', JSON.stringify({ name: 'setting', type: 'database', ...this.settingForm }))
        this.$notify({duration: 1000, title: '设置', message: '保存成功', type: "success"})
        await utils.sleep(500)
        // 切换tab页面
        emitvue.$emit('changeTab', 'analyze')
        // 更新设置
        emitvue.$emit('refreshSetting', null)
      },

    },
    async mounted() {
      const config = await invoke('get', { name: 'setting', type: 'database' })
      if (config) {
        this.settingForm = config
      }
    },
    components: {

    },
  }
</script>


<style scoped>

</style>